<template>
  <c-card :title="title">
    <div class="nav ai-center flex jc-between">
      <div class="nav-item" v-for="(caterory, i) in data" :key="i" :class="{ active: current == i }" @click="current = i">
        <div class="nav-link">{{ caterory.name }}</div>
      </div>
    </div>
    <swiper>
      <swiper-slide v-for="(caterory, i) in data" :key="i">
        <slot name="body" :caterory="caterory" />
      </swiper-slide>
    </swiper>
  </c-card>
</template>
<script>
import Card from '../components/Card';
export default {
  props: {
    title: { type: String, required: true },
    data: { type: Array, required: true },
  },
  components: {
    'c-card': Card,
  },
  data() {
    return {
      current: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
.nav {
  height: 2.5rem;
  .nav-item {
    border-bottom: 3px solid transparent;
    &.active {
      border-bottom: 3px solid #db9e3f;
    }
  }
}
</style>
